{% extends "base.html" %}

{% block title_block %}Welcome{% endblock %}

{% block stylesheets %}
<link type="text/css" rel="stylesheet" href="/media/css/index.css" />
<link type="text/css" rel="stylesheet"
      href="/media/js/openlayers/theme/default/style.css" />
<link type="text/css" rel="stylesheet"
      href="/media/js/openlayers/theme/default/framedCloud.css" />
{% endblock %}

{% block scripts %}
<script type="text/javascript" src="/media/js/openlayers/OpenLayers.js"></script>
<script type="text/javascript">
    var map;
    var geotags = {};

    geotags.map = null;
    
    geotags.wms = new OpenLayers.Layer.WMS(
        "{{ wms_layer.name }}",
        "{{ wms_layer.url}}",
        {layers:"{{ wms_layer.layers }}"}
        );

    /*
    geotags.kml = new OpenLayers.Layer.GML("GeoTags","geotags", {
        format: OpenLayers.Format.KML,
        formatOptions: {
            extractStyles: true,
            extractAttributes: true}}
        );
    */
    
    geotags.init = function () {
        var options = {
        'projection' : new OpenLayers.Projection('EPSG:4326'),
        'numZoomLevels' : 18,
        'controls': []
            };
        geotags.map = new OpenLayers.Map('map', options);
        //geotags.map.addLayers([geotags.wms, geotags.kml]);
        geotags.map.addLayer(geotags.wms);
        geotags.map.addControl(new OpenLayers.Control.PanZoomBar());
        geotags.map.addControl(new OpenLayers.Control.MouseToolbar());
        geotags.map.addControl(new OpenLayers.Control.MousePosition());
        geotags.map.addControl(new OpenLayers.Control.LayerSwitcher({'ascending':false}));
        geotags.map.zoomToMaxExtent();
        };
</script>
{% endblock %}

{% block bodyoptions %}{% endblock %}

{% block top %}
<table>
    <tr>
        <td style="width:32px;"><img src="/media/img/logo.png" /></td>
        <td><h1>GeoTags</h1></td>
        <td style="text-align: right;">
            {% if link %}
                <a href="/geotags/login/">[login]</a>
            {% else %}
                <a href="/geotags/add/">[add]</a>
                <a href="/geotags/logout/">[logout]</a>
            {% endif %}
        </td>
    </tr>
</table>

{% endblock %}

{% block content %}
<div id="map" class="map"></div>

<script type="text/javascript">geotags.init()</script>
{% endblock %}